<template>
	<!-- 全部组件 -->
	<view class="">
		<!-- top信息栏 -->
		<view class="page-box">
			<view class="order" >
				<view class="top">
					<view class="left">
						<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
						<view class="store">天猫</view>
						<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
					</view>
					<view class="right">交易失败</view>
				</view>
				<!-- 商品信息以及价格栏 -->
				<view class="shoppingMessage">
					<!-- 左边商品图片信息 -->
					<view class="left-image">
						<image src="../../static/logo.jpg" mode=""></image>
					</view>
					<!-- 中间商品标题，款式，以及发货时间信息 -->
					<view class="centerMessage">
						<view class="storeTitle">
							【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风
						</view>
						<view class="storeType">
							粉色：M
						</view>
						<view class="storeTime">
							发货时间 付款7天内发货
						</view>
					</view>
					<!-- 右边商品单价以及商品数量信息 -->
					<view class="rightMessage">
						<view class="storePrice">
							￥128.<text id="decimal">05</text>
						</view>
						<view class="number" style="text-align: right;">
							x1
						</view>
					</view>
				</view>
				<!-- 总计 -->
				<view class="total">
					共3件商品 合计:
					<!-- 整数部分 -->
					<text class="total-price">
						￥199.
						<!-- 小数部分 -->
						<text class="decimal">05</text>
					</text>
				</view>
				<!-- 底部处理按钮 -->
				<view class="bottom">
					<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
					<view class="logistics btn">查看物流</view>
					<view class="exchange btn">卖了换钱</view>
					<view class="evaluate btn">评价</view>
				</view>
			</view>
	    </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 接收父组件传递的商品信息以及订单状态
				prop:["message"]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
	.shoppingMessage{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 20rpx 0;
	}
	.left-image{
		border-radius: 12px;
		flex: 2;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.centerMessage{
		align-content: space-between;
		flex: 4;
		margin: 0 10rpx 0 10rpx;
	}
	.rightMessage{
		padding: 10rpx 0 10rpx 0;
		flex: 1;
	}
	.storeTitle{
		font-size: 24rpx;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	.storeType{
		margin: 3px 0;
		font-size: 20rpx;
		color: #909399;
	}
	.storeTime{
		color: #e5d001;
		font-size: 20rpx;
	}
	.number{
		font-size: 20rpx;
		color: #ccc;
	}
</style>
